<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>网上商城</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#container{
			width: 920px;
			margin: 0 auto;
		}
		#header{
			width: 100%;
			height: 60px;
			background: url("../images1/register_head_bg.gif");
			background-size: 100% 98%;
			box-sizing: border-box;
			padding-top: 10px;
			padding-left: 20px;
		}
		#logo{
			float: left;
		}
		#header ul{
			float: right;
			margin-top: 20px;
			margin-right: 20px;
		}
		li{
			list-style: none;
			float: left;
		}
		#body{
			width: 100%;
			border-top: 1px #ddd solid;
			border-left: 1px #ddd solid;
			border-right: 1px #ddd solid;
			margin-bottom: -15px;
			padding-bottom: 20px;
			margin-top: 10px;
		}
		#body ul{
			width: 100%;
		}
		#body ul li{
			width: 33.33%;
			height: 35px;
			background-size: 100% 100% !important;
			text-align: center;
			box-sizing: border-box;
			padding-top: 6px;
			color: #663333;
		}
		#banner{
			width: 600px;
			margin: 0 auto;
			padding-top: 80px;
			padding-bottom: 5px;
		}
		#body form{
			width: 600px;
			margin: 0 auto;
		}
		.inputTxt{
			width: 200px;
			height: 20px;
		}
		#footer{
			width: 100%;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<div id="logo">
				<img src="../images1/dd_logo.gif" alt="logo">
			</div>
			<ul>
				<li><a href="">首页</a></li>
				<li>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
				<li><a href="">商品展示页</a></li>
				<li>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
				<li><a href="">购物车</a></li>
				<li>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
				<li><a href="">登录</a></li>
			</ul>
		</div>
		<div id="body">
			<ul>
				<li style="background: url('../images1/register_tag_left.gif');">填写注册信息</li>
				<li style="background: url('../images1/register_tag_mid.gif');">2.邮箱验证</li>
				<li style="background: url('../images1/register_tag_right.gif');">3.完成注册</li>
			</ul>
			<div id="banner">
				<img src="../images1/register_pic_01.gif" style="float: left;">
				<span style="font-size: 22px;margin-left: 20px">HI,欢迎注册，尽享多重优惠服务！</span><br>
				<span style="color: red;margin-left: 20px">您所提供的资料不会用作其他用途，敬请放心填写。</span>
			</div>
			<div style="height: 2px;background: url('../images1/register_dotted.gif');margin-bottom: 20px"></div>
			<form action="">
				<table cellspacing="5">
					<tr>
						<td>Email地址：</td>
						<td><input type="text" class="inputTxt"></td>
					</tr>
					<tr>
						<td>设置昵称：</td>
						<td><input type="text" class="inputTxt" name="nickName" data="id:123"></td>
					</tr>
					<tr>
						<td>设置密码：</td>
						<td><input type="password" class="inputTxt"></td>
					</tr>
					<tr>
						<td>再输入一次密码：</td>
						<td><input type="password" class="inputTxt"></td>
					</tr>
					<tr>
						<td>性别：</td>
						<td>
							<input type="radio" name="sex" value="male"> 男
							<input type="radio" name="sex" value="female"> 女
						</td>
					</tr>
					<tr>
						<td>头像：</td>
						<td>
							<input type="file">
						</td>
					</tr>
					<tr>
						<td>爱好：</td>
						<td>
							<input type="checkbox" value="gaming"> 玩游戏
							<input type="checkbox" value="reading"> 看书
							<input type="checkbox" value="sports"> 运动
						</td>
					</tr>
					<tr>
						<td>所在地区：</td>
						<td>
							<select name="location1" id="location1">
								<option value="">请选择省/城市</option>
							</select>
							<select name="location2" id="location2">
								<option value="">请选择市/地区</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>注册须知：</td>
						<td>
							<textarea name="info" id="info" cols="50" rows="3" readonly="readonly">欢迎阅读服务条款协议，欢迎来到实力至上主义的教室！</textarea>
						</td>
					</tr>
					<tr>
						<td>同意以上协议：</td>
						<td><input type="checkbox"></td>
					</tr>
					<tr>
						<td></td>
						<td><br><a href=""><img src="../images1/register_btn_out.gif" alt=""></a></td>
					</tr>
				</table>
			</form>
		</div>
		<img src="../images1/register_shadow.gif" alt="" style="width: 100%;height: 2px;">
		<div id="footer">
			Copyright &copy; 商城 2014-2015，All Rights Reserved<img src="../images1/validate.gif" alt="Copyright">
		</div>
	</div>
</body>
</html>